<style lang="less" scoped>
  /deep/.el-dialog--center .el-dialog__body {
    padding: 31px 51px 34px 28px;
  }

</style>
<template>
  <el-dialog
    id="customizedList"
    title="自定义列表"
    :append-to-body='true'
    :visible.sync="customizedListShow"
    :before-close="CustomizedListClose"
    width="940px"
    top="3%"
    center>
    <div class="of">
      <div>
        <el-transfer-move
          :inputList="tableHeaderData"
          :outputListTemp="currentRightChecked"
          :alias="{key:'prop',label:'label'}"
          @changeOutputListTemp="changeOutputListTemp"></el-transfer-move>
      </div>
      <div slot="footer" class="dialog-footer mt20 fr">
        <el-button @click="CustomizedListClose" size="medium" class="mr20">关闭</el-button>
        <el-button type="primary" @click="CustomizedListSave" size="medium">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import CommonTable from '@/components/common/CommonTable'
import ElTransferMove from '@/components/pacs/elTransferMove'

export default {
  data () {
    return {
      currentRightChecked: []
    }
  },
  props: {
    customizedListShow: {
      type: Boolean
    },
    tableHeaderData: { // 即propData
      type: Array,
      default: []
    }
  },
  components: {
    CommonTable,
    ElTransferMove
  },
  mounted () {
    // 最初,右侧等于左侧
    this.currentRightChecked = this.tableHeaderData.map(ele => {
      return ele.prop
    })
  },
  methods: {
    CustomizedListClose () {
      this.$emit('CustomizedListClose', '')
    },
    // 穿梭框v-model绑定值改变
    changeOutputListTemp (val) {
      this.currentRightChecked = val
    },
    CustomizedListSave () {
      console.log(this.currentRightChecked)
      this.$emit('CustomizedListSave', this.currentRightChecked)
    }
  }
}
</script>
